<template>
	<div>
		<p>
			clicked: {{ count }} times, count is
			{{ oddOrEven }}
		</p>
		<!-- <p>
			clicked: {{ this.$store.state.count.count }} times, count is
			{{ this.$store.getters.oddOrEven }}
		</p> -->
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementIfOdd">increment if odd</button>
		<button @click="incrementAsync(3)">increment async</button>
	</div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
	name: "App",
	computed: {
		// ...mapState({
		// 	// 将vuex的state中xxx数据映射到计算属性中
		// 	count: (state) => state.count.count,
		// 	age: (state) => state.person.age,
		// }),
		...mapState("count", ["count"]),
		...mapState("person", ["age"]),
		...mapGetters("count", ["oddOrEven"]), // 将vuex的getters中xxx数据映射到计算属性中
	},
	methods: {
		...mapActions("count", ["incrementAsync"]), // 将vuex的actions中xxx函数映射到方法中
		...mapMutations("count", ["INCREMENT", "DECREMENT"]), // 将vuex的mutations中xxx函数映射到方法中
		increment() {
			this.INCREMENT(3);
		},
		decrement() {
			this.DECREMENT(3);
		},
		incrementIfOdd() {
			if ((this.count & 1) === 1) {
				this.INCREMENT(3);
			}
		},
		// incrementAsync() {
		// 	this.incrementAsync(3);
		// },
	},
};
</script>

<style></style>
